<template>
  <div>
    <div class="search">
      <div class="input_home">
        <van-icon
          name="arrow-left"
          size="20px"
          class="icon-back"
          @click="$router.back()"
        />
        <span class="city" @click="toCity"
          >{{ city }} <van-icon name="arrow-down"
        /></span>
        <input type="text" name="" id="" placeholder="请输入小区或地址" />
        <van-icon name="location-o" size="25px" color="white" @click="toMap" />
      </div>
    </div>

    <van-sticky>
      <van-dropdown-menu active-color="#B26382">
        <van-dropdown-item title="区域" ref="area">
          <van-picker
            cancel-button-text=" "
            confirm-button-text=" "
            :columns="area"
            ref="area1"
          >
            <template #columns-bottom>
              <div class="btns">
                <button class="cancel" @click="closeArea">取消</button>
                <button class="confirm" @click="confirmArea">确认</button>
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item title="方式" ref="rentType">
          <van-picker
            cancel-button-text=" "
            confirm-button-text=" "
            :columns="rentType"
            ref="rentType1"
          >
            <template #columns-bottom>
              <div class="btns">
                <button class="cancel" @click="closeRentType">取消</button>
                <button class="confirm" @click="confirmRentType">确认</button>
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item title="租金" ref="price">
          <van-picker
            cancel-button-text=" "
            confirm-button-text=" "
            :columns="price"
          >
            <template #columns-bottom>
              <div class="btns">
                <button class="cancel" @click="closePrice">取消</button>
                <button class="confirm">确认</button>
              </div>
            </template>
          </van-picker>
        </van-dropdown-item>

        <van-dropdown-item
          title="筛选"
          duration="0"
          class="Filter_style"
          ref="shaixuan"
        >
          <dl class="FilterList">
            <dt class="title">户型</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in huxingList"
                  :key="item.value"
                  >{{ item.text }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title">朝向</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in chaoxiangList"
                  :key="item.value"
                  >{{ item.text }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title">楼层</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in floorList"
                  :key="item.value"
                  >{{ item.text }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <dl class="FilterList">
            <dt class="title" characteristicList>房屋亮点</dt>
            <dd class="select">
              <van-row>
                <van-col
                  span="12"
                  class="item"
                  v-for="item in liangdianList"
                  :key="item.value"
                >
                  {{ item.text }}</van-col
                >
              </van-row>
            </dd>
          </dl>
          <div class="anniu">
            <van-button
              type="default"
              style="width: 40%; color: #21b97a"
              @click="closeShaixuan"
              >取消</van-button
            >
            <van-button type="primary" style="width: 60%">确定</van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>

    <!-- 房屋搜索列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      style="margin-bottom: 45px"
      :error.sync="error"
      error-text="房间获取失败，点击重新加载"
    >
      <houses-item
        v-for="(item, index) in housesList"
        :key="index"
        :houseInfo="item"
      ></houses-item>
    </van-list>
  </div>
</template>
<script>
import { housesListApi, cityListApi, housesSearchApi } from "@/api";
import HousesItem from "@/components/HousesItem.vue";
export default {
  name: "",
  data() {
    return {
      city: this.$store.state.cityName,
      housesList: [],
      area: [], //区域
      rentType: [], //方式
      price: [], //价格
      // 筛选
      huxingList: [], // 户型
      chaoxiangList: [], // 朝向
      floorList: [], // 楼层
      liangdianList: [], // 亮点
      loading: false,
      finished: false,
      error: false,
      show: false,
    };
  },
  components: { HousesItem },
  computed: {},
  methods: {
    toMap() {
      this.$router.push({
        path: "/map",
      });
    },
    toCity() {
      this.$router.push({
        path: "/city",
        query: {
          city: this.city,
        },
      });
    },

    //区域
    closeArea() {
      this.$refs.area.toggle();
    },
    async confirmArea() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$refs.area.toggle();
      const res = await this.$refs.area1.getValues();
      console.log(res);

      if (res[0].value === "area") {
        // 置空subwayId
        this.$store.commit("SET_PARMAS_SUBWAY", "");
        // 区域查房
        const areaId = () => {
          //根据确定结果抓取areaId
          if (res[1].value === "null") {
            return "";
          } else if (res[2].value === "null") {
            return res[1].value;
          } else {
            return res[2].value;
          }
        };
        const areaIds = areaId();
        this.$store.commit("SET_PARMAS_AREA", areaIds);
      }
      //地铁查房
      else {
        //置空areaId
        this.$store.commit("SET_PARMAS_AREA", "");

        const subwayId = () => {
          //根据确定结果抓取subwayId
          if (res[1].value === "null") {
            return "";
          } else if (res[2].value === "null") {
            return res[1].value;
          } else {
            return res[2].value;
          }
        };
        const subwayIds = subwayId();

        this.$store.commit("SET_PARMAS_SUBWAY", subwayIds);
      }
      try {
        const res2 = await housesSearchApi(this.$store.state.parmas);
        console.log(res2);
        this.housesList = res2.data.body.list;
        this.$toast.success("加载成功");
      } catch (error) {
        this.$toast.fail("加载失败");
      }
    },
    //方式
    closeRentType() {
      this.$refs.rentType.toggle();
    },
    async confirmRentType() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$refs.rentType.toggle();
      const res = await this.$refs.rentType1.getValues();
      // console.log(res);
      this.$store.commit("SET_PARMAS_RENTTYPE", res[0].value);
      try {
        const res2 = await housesSearchApi(this.$store.state.parmas);
        // console.log(res2);
        this.housesList = res2.data.body.list;
        this.$toast.success("加载成功");
      } catch (error) {
        this.$toast.fail("加载失败。请重试");
      }
    },
    //价格
    closePrice() {
      this.$refs.price.toggle();
    },

    closeShaixuan() {
      this.$refs.shaixuan.toggle();
    },

    async onLoad() {
      try {
        //触底加载
        const start = this.$store.state.parmas.start + 10;
        const end = this.$store.state.parmas.end + 10;
        this.$store.commit("SET_PARMAS_START", start);
        this.$store.commit("SET_PARMAS_END", end);

        const res = await housesSearchApi(this.$store.state.parmas);
        console.log(res);
        if (
          !res.data.body.list ||
          res.data.body.count <= this.$store.state.parmas.end
        ) {
          this.finished = true;
          this.loading = false;
          return;
        }
        this.housesList = [...this.housesList, ...res.data.body.list];
      } catch (error) {
        this.error = true;
      } finally {
        this.loading = false;
      }
    },
  },
  async created() {
    //筛选数据

    try {
      const res = await cityListApi({
        id: this.$store.state.parmas.cityId,
      });
      const baseRes = JSON.parse(JSON.stringify(res).replace(/label/gi, "text"))
        .data.body;
      console.log(baseRes);

      //区域＆地铁
      const areaList = baseRes.area;
      areaList.children[0].children = [{ text: "" }];
      const subwayList = baseRes.subway;
      subwayList.children[0].children = [{ text: "" }];
      this.area[0] = areaList;
      this.area[1] = subwayList;

      //方式
      this.rentType = baseRes.rentType;
      //租金
      this.price = baseRes.price;
      // 筛选
      this.huxingList = baseRes.roomType; // 户型
      this.chaoxiangList = baseRes.oriented; // 朝向
      this.floorList = baseRes.floor; // 楼层
      this.liangdianList = baseRes.characteristic; // 亮点
    } catch (error) {}

    //房屋数据
    try {
      // this.loading = true;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$store.commit("SET_PARMAS_START", 1);
      this.$store.commit("SET_PARMAS_END", 10);
      const res = await housesListApi(this.$store.state.parmas.cityId);
      // console.log(res);
      this.housesList = res.data.body.list;
      // this.loading = false;
      this.$toast.success("加载成功");
      // console.log(this.housesList);
    } catch (error) {
      // console.log(error);
      this.$toast.fail("加载失败，请刷新");
    }
  },
};
</script>
<style lang="less" scoped>
.search {
  position: relative;
  background-color: bisque;
  min-height: 65px;
}
.icon-back {
  position: absolute;
  left: -10px;
  top: 10px;
}
.input_home {
  position: absolute;
  left: 20px;
  top: 15px;
  z-index: 9;
}
.input_home .city {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 14px;
  margin-left: 10px;
}
.input_home input {
  width: 240px;
  height: 30px;
  font-size: 14px;
  color: beige;
  border-radius: 2px;
  border-color: transparent;
  padding-left: 60px;
  margin-right: 12px;
  margin-left: 15px;
}
.btns {
  display: flex;
  height: 50px;
}
.cancel {
  flex: 2;
  color: #07c160;
  background-color: #fff;
  border-color: transparent;
}
.confirm {
  flex: 3;
  color: #fff;
  background-color: #07c160;
  border-color: transparent;
}

:deep(.van-list) {
  max-height: calc(100vh - 65px - 48px - 50px);
  overflow: auto;
}

//筛选样式
:deep(.Filter_style) {
  .van-dropdown-item--down {
    top: 0px !important;
  }
  .van-dropdown-item__content {
    position: fixed;
    height: 100%;
    max-height: 100%;
    z-index: 999;
    transition-duration: 0s !important;
    padding-bottom: 60px;
    .FilterList {
      padding: 0 15px;
      .title {
        margin: 20px 0;
      }
      .select {
        padding-bottom: 14px;
        padding-right: 50px;
        border-bottom: 1px solid #ccc;
        .item {
          width: 70px;
          height: 32px;
          border: 1px solid #ccc;
          margin: 10px;
          text-align: center;
          line-height: 32px;
          font-size: 12px;
          color: #888;
        }
        .itemActive {
          border: 1px solid #21b97a;
          color: #21b97a;
          background-color: #defaef;
        }
      }
    }
  }
  .van-popup--top {
    top: 0;
    left: 75px;
    width: 80%;
  }
  .btn {
    z-index: 6;
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    background: skyblue;
    width: 80%;
    border-top: 1px solid #ccc;
    height: 50px;
    text-align: center;
    line-height: 50px;
    .left {
      flex: 3;
      background: #fff;
      color: #21b97a;
    }
    .right {
      flex: 6;
      background: #21b97a;
      color: #fff;
    }
  }
  .palceholder {
    height: 60px;
  }
}
.anniu {
  width: 100%;
  position: sticky;
  bottom: 0;
}
:deep(.van-dropdown-menu__bar) {
  z-index: 1;
}
</style>
